<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <title>动态组件</title>
    <script src="https://unpkg.com/vue/dist/vue.js"></script>
</head>

<body>
    <div id="app">
        <ul>
            <li v-for="c in labels"><a href="#" @click="currentView=c.t">{{ c.n }}</a></li>
        </ul>
        <component v-bind:is="currentView"></component>
    </div>
    <script>
    new Vue({
        el: '#app',
        data: {
            currentView: '',
            labels: [{
                n: '组件一',
                t: 'component-1'
            }, {
                n: '组件二',
                t: 'component-2'
            }, {
                n: '组件三',
                t: 'component-3'
            }]
        },
        methods: {
            switch: function(argument) {
            }
        },
        components: {
            'component-1': {
                template: "<h1>组件一</h1>"
            },
            'component-2': {
                template: "<h1>组件二</h1>"
            },
            'component-3': {
                template: "<h1>组件三</h1>"
            }
        }
    })
    </script>
</body>

</html>
